import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ugrownews_flutter/utils/TextUtil.dart';
import 'package:ugrownews_flutter/utils/Toast.dart';
import 'package:ugrownews_flutter/utils/UGrowColors.dart';
import 'package:ugrownews_flutter/utils/netutil/NewsNetUtil.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';

class ScreenNewsDetail extends StatefulWidget {
  String id;

  ScreenNewsDetail({Key key, @required this.id}) : super(key: key);

  @override
  _ScreenNewsDetailState createState() {
    _ScreenNewsDetailState _screenNewsDetailState = _ScreenNewsDetailState();
    _initData(_screenNewsDetailState);
    return _screenNewsDetailState;
  }

  void _initData(_ScreenNewsDetailState _screenNewsDetailState) {
    Map<String, String> params = new Map();
    params["id"] = id;
    new NewsNetUtil().getNewsDetail(params, (result, isCache) {
      Map jsonResult = json.decode(result);
      String state = jsonResult["state"];
      if (state.isNotEmpty && state == "success") {
        Map data = jsonResult["data"];
        if (_screenNewsDetailState.mounted) {
          String html = data["content"];
          if (TextUtil.isEmpty(html)) {
            html = "";
          }
          String head =
              r'<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title></head> <body>';
          String foot = r'</body></html>';
          html = html.replaceAll(r"\", "");
          html = html.replaceAll("<video", "<video playsinline ");
          html = head + html + foot;
          _screenNewsDetailState.setState(() {
            _screenNewsDetailState.html = html;
            _screenNewsDetailState.isCacheFinished = true;
          });
        }
      }
    });
  }
}

class _ScreenNewsDetailState extends State<ScreenNewsDetail> {
  String html = "";
  bool isCacheFinished = false;

  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> params = new Map();
    params["allowsInlineMediaPlayback"] = true;
    params["allowsPictureInPictureMediaPlayback"] = true;
    params["allowAirPlayFormMediaPlayback"] = false;
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          //顶部导航，包含通知栏高度
          new Positioned(
            height: ScreenUtil.instance.setWidth(118) +
                MediaQuery.of(context).padding.top,
            width: ScreenUtil.screenWidthDp,
            child: new Container(
              color: UGrowColors.getColor("#dff1fd"),
              child: new Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  //底部渐变背景
                  new Container(
                    margin: EdgeInsets.only(
                        top: MediaQuery.of(context).padding.top),
                    width: ScreenUtil.screenWidthDp,
                    height: ScreenUtil.instance.setWidth(118),
                    decoration: new BoxDecoration(
                        gradient: new LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                          UGrowColors.getColor("#dff1fd"),
                          UGrowColors.getColor("#84dce6"),
                        ])),
                  ),
                  //返回按钮
                  new Positioned(
                    left: 0,
                    top: MediaQuery.of(context).padding.top,
                    height: ScreenUtil.getInstance().setWidth(118),
                    width: ScreenUtil.getInstance().setWidth(140),
                    child: new GestureDetector(
                      child: new Container(
                        padding: EdgeInsets.all(
                            ScreenUtil.getInstance().setWidth(15)),
                        margin: EdgeInsets.only(
                            left: ScreenUtil.getInstance().setWidth(5)),
                        child: new Image.asset(
                          "images/detail_back.png",
                          fit: BoxFit.fill,
                        ),
                      ),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                  ),
                  //中间标题
                  new Container(
                    margin: EdgeInsets.only(
                      top: MediaQuery.of(context).padding.top,
                    ),
                    height: ScreenUtil.getInstance().setWidth(66),
                    child: new Text(
                      "新闻详情",
                      style: new TextStyle(
                          fontSize: ScreenUtil.getInstance().setWidth(60),
                          color: Colors.black),
                    ),
                  ),
                ],
              ),
            ),
          ),
          //WebView
          new Positioned(
            top: MediaQuery.of(context).padding.top +
                ScreenUtil.instance.setWidth(118),
            bottom: MediaQuery.of(context).padding.bottom,
            width: ScreenUtil.screenWidthDp,
            child: isCacheFinished
                ? new InAppWebView(
                    initialData: new InAppWebViewInitialData(
                      html,
                      mimeType: "text/html",
                      encoding: "utf8",
                      baseUrl: "about:blank",
                    ),
                    initialOptions: params,
                    onWebViewCreated: (controler) {
                      print("onWebViewCreated");
                      controler.setOptions(params);
                    },
                  )
                : new Container(
                    color: Colors.white,
                    child: new Center(
                      child: new Text(""),
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}
